<template>
    <div class="mynav">
        <div class="box">
            <span class="iconfont box__icon">&#xe6e1;</span>
            <input class="box__search" placeholder="山姆会员商店优惠商品" type="text" name="" id="">
        </div>
        <div class="nav">
            <div style="text-align: center;">
                <img class="nav__img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="">
            </div>
            <div class="nav__items">
                <template v-for="(item) in iconList" :key="item.id">
                    <div class="nav__item" style="margin-left: 0px;"> 
                        <img class="nav__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
                        <div class="nav__item__desc">{{item.desc}}</div>
                    </div>
                </template>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    setup(){
        const iconList = [
            { imgName: "超市", desc: "超市便利" },
            { imgName: "红包", desc: "红包套餐" },
            { imgName: "大牌免运", desc: "大牌免运" },
            { imgName: "签到", desc: "签到" },
            { imgName: "蛋糕", desc: "烘焙蛋糕" },
            { imgName: "家居", desc: "家居时尚" },
            { imgName: "医药健康", desc: "医药健康" },
            { imgName: "鲜花", desc: "鲜花" },
            { imgName: "水果店", desc: "水果店" },
            { imgName: "菜市场", desc: "菜市场" },
        ];
        return {iconList};
    }
}

</script>
<style lang="scss" scoped>
.mynav{
    border-bottom: 10px solid #F1F1F1;
}
.box{
    margin-left: 18px;
    margin-top: 16px;
    position: relative;
    color: #B7B7B7;
    &__search{
        box-sizing: border-box;
        padding-left: 38px;
        border-radius: 16px;;
        background-color: #F5F5F5;
        border: none;
        width: 339px;
        height: 32px;
    }
    &__icon{
        font-size: 22px;
        position: absolute;
        left: 16px;
        top: 6px;
    }
}
.nav{
    // margin-left: 18px;
    margin-top: 16px;

    &__img{
        width: 339px;
        height: 86px;
        // margin: 0 auto;
        // text-align: center;

    }
    &__items{
        font-size: 12px;
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    &__item{
        
        // flex: 1;
        flex: 0 0 20%;
        margin-left: 30px;
        margin-bottom: 16px;
        &__img{
            width: 40px;
            height: 40px;
        }
    }
}   
</style>